<template>
	<view class="container">
		<view class="user-info">
			<view class="top">
				<view class="u-id">
					<view class="img">
						<image :src="userInfo.headImg" mode=""></image>
					</view>
					<view class="name_id">
						<view class="u-name">{{userInfo.nickName}}</view>
						<view class="id"> 账号：{{userInfo.userId}} </view>
					</view>
				</view>
				<view class="btn-coins">
					<view class="coins">金币：{{userInfo.totalCoin}}</view>
					<view class="button" @click="nav('/pages/withdraw/withdraw')">提现</view>
					<view class="question" @click="nav('/pages/qr-code/qr-code')">如何获取金币?</view>
				</view>
			</view>
			<view class="bottom">
				<view class="reading-progress-bar">
					<view class="progress-bar-title">
						本次阅读任务进度
					</view>
					<!-- 这里要写进度条 -->
					<view class="progress-container">
						<view class="progress-bar" :style="`width: ${progress}%;`">
							<span class="progress-percentage">{{progress}}%</span>
							<image src="@/static/images/read/red.png" class="progress-icon" />
						</view>
						<image class="icon-gif" src="@/static/images/read/red-g.gif" />
					</view>
				</view>
			</view>
		</view>
		<!-- 阅读样式 -->
		<view class="reading-detail">
			<view class="text_tips">
				<view class="text_tips_01">每日阅读红包</view>
				<view class="text_tips_02">阅读赚现金</view>
				<view class="text_tips_03">
					满3个任务获得20元红包
					<image src="@/static/images/read/highest.png" mode=""></image>
				</view>
				<view class="text_tips_04">
					赚红包的方法<br />点击开始阅读,以<text class="style36">正常<br />速度阅读文章3秒以<br />上</text>,完成三个任务
				</view>
			</view>
			<!-- 可阅读 -->
			<!-- <view v-if="taskInfo.currentRound<=2&&taskInfo.articleCount<12&&taskInfo.timeInterval==0" class="start-reading" @click="nav('/pages/read/read')"></view> -->
			<view v-if="taskInfo.currentRound<=2&&taskInfo.articleCount<12&&taskInfo.timeInterval<=0" class="start-reading">
				<wx-open-launch-weapp class="opentag" username="gh_acc547c62f73"
					:path="`pages/task/task?taskUid=${userInfo.userId}`" env-version="trial">
					<div v-is="'script'" type='text/wxtag-template'>
						<div style="width: 476rpx; height: 180rpx;"></div>
					</div>
				</wx-open-launch-weapp>
			</view>

			<!-- 不可以阅读，显示倒计时 -->
			<view v-if="taskInfo.timeInterval > 0" class="countdown-reading start-reading-n">
				<uni-countdown :font-size="40" :show-day="false" @timeup="timeup()" :hour="taskInfo.hours"
					:minute="taskInfo.minutes" :second="taskInfo.seconds" color="#4785ff"></uni-countdown>
			</view>

			<!-- 今天任务已完成 -->
			<view v-if="taskInfo.currentRound == 2 && taskInfo.articleCount == 12" class="done-reading start-reading-n">
				今天任务已完成</view>

			<!-- 教学文字 -->
			<view class="desc"> 每天推荐2轮，每轮阅读间隔2.5小时 </view>
			<!-- 教学图标 -->
			<view class="guide-icon" @click="videoPopup.open()">
				<image src="@/static/images/index/icon06.png" />
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="menu-box">
			<view class="menu-item" @click="nav('/pages/qr-code/qr-code')">
				<view class="icon">
					<image src="@/static/images/index/icon1.png" />
				</view>
				<view class="name"> 收徒二维码 </view>
			</view>
			<view class="menu-item" @click="videoService.open()">
				<view class="icon">
					<image src="@/static/images/index/icon2.png" />
				</view>
				<view class="name"> 联系客服 </view>
			</view>
			<view class="menu-item" @click="nav('/pages/ranking/ranking')">
				<view class="icon">
					<image src="@/static/images/index/icon3.png" />
				</view>
				<view class="name"> 大赛排名 </view>
			</view>
			<view class="menu-item" @click="nav('/pages/promotion-income/promotion-income')">
				<view class="icon">
					<image src="@/static/images/index/icon4.png" />
				</view>
				<view class="name"> 收徒收益 </view>
			</view>
		</view>
	</view>
	<!-- 视频教程 -->
	<uni-popup ref="videoPopup" type="top" mask-background-color="rgba(0,0,0,0.9)">
		<view class="video_container">
			<video autoplay src="https://oss.188pi.com/common/wenzhang-task/jiaoxueshipin.mp4"></video>
			<image @click="videoPopup.close()" src="@/static/images/index/close.png" mode=""></image>
		</view>
	</uni-popup>
	<!-- 微信客服 -->
	<uni-popup ref="videoService" type="center" mask-background-color="rgba(0,0,0,0.9)">
		<view class="kefu_container">
			<image class="code" src="@/static/images/index/code02.png" mode=""></image>
			<view class="tips">⬆️ 长按二维码联系客服 ⬆️</view>
			<image @click="videoService.close()" class="close" src="@/static/images/index/close.png" mode=""></image>
		</view>
	</uni-popup>
	<!-- 红包弹框组件 -->
	<redPacket />
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import * as jweixin from "weixin-js-sdk";
	import {
		getuser,
		GetTask,
		GetJsConfig
	} from "@/api/general.js"
	onShow(() => {
		nextTick(() => {
			skipWxApplet()
		})
		getUserInfo()
		getTaskInfo()
	})
	// 阅读进度
	let progress = ref(0)

	function chuangeProgress(num) {
		progress.value = (num / 12 * 100).toFixed(0)
	}
	
	// 用户任务状态信息 
	let taskInfo = ref({})
	async function getTaskInfo() {
		let res = await GetTask()
		taskInfo.value = res
		chuangeProgress(res.articleCount)
		if(res.timeInterval > 0) {
			let ms = res.timeInterval
			taskInfo.value.hours = Math.floor(ms / (1000 * 60 * 60));
			taskInfo.value.minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
			taskInfo.value.seconds = Math.floor((ms % (1000 * 60)) / 1000);
		}
	}

	// 用户信息
	let userInfo = ref({})
	// 获取用户信息
	async function getUserInfo() {
		let res = await getuser()
		userInfo.value = res
		uni.setStorage({
			key: 'userInfo',
			data: JSON.stringify(res)
		})
	}

	// 获取wx开放权限
	async function skipWxApplet() {
		const params = {
			Url: location.href
		}
		let res = await GetJsConfig(params)
		if (res.jsConfig) {
			jweixin.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
				appId: res.jsConfig.appId, // 必填，公众号的唯一标识
				timestamp: res.jsConfig.timestamp, // 必填，生成签名的时间戳
				nonceStr: res.jsConfig.nonceStr, // 必填，生成签名的随机串
				signature: res.jsConfig.signature, // 必填，签名
				jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表
				openTagList: ['wx-open-launch-weapp']
			})
			jweixin.ready(function() {
				console.log("成功!");
			})
			jweixin.error(function(res) {
				console.error("失败!", res);
				uni.showToast({
					title: "微信开放权限获取失败,正在重试...",
					icon: "none",
					mask: true
				})
				setTimeout(() => {
					location.reload();
				},1000)
			})
		}
	}

	function timeup() {
		nextTick(() => {
			setTimeout(() => {
				getTaskInfo()
			},1000)
		})
	}
	// 客服
	let videoService = ref(null)
	// 视频教程
	let videoPopup = ref(null)
	// 跳转页面
	function nav(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		background-image: url(@/static/images/read/bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.user-info {
			padding: 0 10rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #302c2d;

				.u-id {
					display: flex;
					align-items: center;

					.img {
						border-radius: 15rpx;
						box-shadow: 0 0 0 1px #005500;
						width: 90rpx;
						height: 90rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #FFF;

						image {
							width: 85rpx;
							height: 85rpx;
							border-radius: 15rpx;
						}
					}

					.name_id {
						margin-left: 20rpx;
						color: #FFF;

						.u-name {
							font-size: 27.9975rpx;
						}

						.id {
							margin-top: 9.9975rpx;
						}
					}
				}

				.btn-coins {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.button {
						width: 156rpx;
						height: 76rpx;
						font-size: 34rpx;
						color: #3477ff;
						line-height: 76rpx;
						text-align: center;
						background-image: url(@/static/images/read/but1.png);
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin: 5rpx 0;
					}

					.question {
						font-size: 24rpx;
						color: #bbb;
					}

					.coins {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: bold;
						white-space: nowrap;
					}
				}
			}

			.bottom {
				margin-bottom: 30rpx;

				.reading-progress-bar {
					margin: 20rpx auto;
					width: 95%;

					.progress-bar-title {
						font-size: 42rpx;
						color: #fff600;
						text-align: center;
						font-weight: bold;
						letter-spacing: 4rpx;
					}

					.progress-container {
						width: 100%;
						height: 50rpx;
						border-radius: 4rpx;
						position: relative;
						background-image: url(@/static/images/read/progress-bg.png);
						background-size: 100% 100%;
						background-repeat: no-repeat;
						display: flex;
						align-items: center;
						padding: 0 20rpx 0 6rpx;
						margin-top: 10rpx;

						.progress-bar {
							width: 0;
							height: 40rpx;
							background-image: linear-gradient(0deg, #e4630d 0%, #ffd800 100%), linear-gradient(#ffffff, #ffffff);
							background-blend-mode: normal, normal;
							border-radius: 20rpx 0 0 20rpx;
							transition: width 0.5s ease;
							position: relative;
							display: flex;
							align-items: center;
						}

						.progress-percentage {
							position: absolute;
							right: 10rpx;
							bottom: 2.5rpx;
							color: #FFFFFF;
							font-size: 26rpx;
							font-weight: bold;
						}

						.progress-icon {
							position: absolute;
							right: -35rpx;
							bottom: -5rpx;
							width: 36rpx;
							height: 50rpx;
						}

						.icon-gif {
							width: 83rpx;
							height: 72rpx;
							position: absolute;
							right: -40rpx;
						}
					}
				}
			}
		}

		.reading-detail {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 0;
			position: relative;

			.text_tips {
				width: 100%;
				height: fit-content;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				font-weight: bold;

				.text_tips_01 {
					color: #000;
					font-size: 36rpx;
					letter-spacing: 2rpx;
				}

				.text_tips_02 {
					color: rgb(68, 130, 255);
					font-size: 70rpx;
					letter-spacing: 5px;
					text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
					margin-top: 20rpx;
				}

				.text_tips_03 {
					color: rgb(68, 130, 255);
					font-size: 56rpx;
					text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
					position: relative;

					image {
						width: 62rpx;
						height: 24rpx;
						position: absolute;
						right: 60rpx;
						top: -10rpx;
					}
				}

				.text_tips_04 {
					color: #000;
					font-size: 42rpx;
					letter-spacing: 4rpx;
					margin: 20rpx 0;

					.style36 {
						color: rgb(236, 111, 37);
						text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
					}
				}
			}

			.start-reading {
				width: 476rpx;
				height: 180rpx;
				font-size: 35rpx;
				color: #ffffff;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url(@/static/images/read/btn-start.gif);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.get-red {
				width: 350rpx;
				height: 101rpx;
				border-radius: 50rpx;
				font-size: 35rpx;
				color: #ffffff;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #e8b907;
			}

			.countdown-reading {
				width: 476rpx;
				height: 150.9975rpx;
				border-radius: 50rpx;
				font-size: 60rpx;
				color: #ffffff;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.start-reading-n {
				background: #ccc !important;
			}

			.done-reading {
				width: 380rpx;
				height: 99.9975rpx;
				font-size: 35rpx;
				color: #ffffff;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url(@/static/images/read/btn-stop.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border-radius: 30rpx;
			}

			.guide-icon {
				width: 120rpx;
				height: 161rpx;
				position: absolute;
				right: 0;
				bottom: -50rpx;
				z-index: 1;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.desc {
				margin-top: 15rpx;
				font-size: 27.9975rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #302c2d;
				text-align: center;
			}

		}


		.menu-box {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-radius: 10rpx;
			background: #f1f3f5;
			margin: 20rpx 0;
			margin-top: 80rpx;

			.menu-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					image {
						width: 108rpx;
						height: 108rpx;
					}
				}

				.name {
					font-size: 27.9975rpx;
					color: #2f4056;
					font-weight: 500;
				}
			}
		}
	}

	.video_container {
		width: 100%;
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;

		video {
			width: 100%;
			height: 1000rpx;
		}

		image {
			width: 60rpx;
			height: 60rpx;
			margin-top: 40rpx;
		}
	}

	.kefu_container {
		width: 688rpx;
		height: 731rpx;
		background: center/100% 100% url(@/static/images/index/qrcode_bg.png);
		position: relative;

		.code {
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			left: calc(50% - 200rpx);
			top: 35rpx;
		}

		.tips {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			line-height: 60rpx;
			font-weight: bold;
			color: #810000;
			position: absolute;
			bottom: 130rpx;
		}

		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: calc(50% - 30rpx);
			bottom: -50rpx;
		}
	}
</style>